<template>
    <template v-for="menu in menuList" :key="menu.id">
      <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
        <template #title>
          <component :is="menu.menuIcon" style="width: 16px;height: 16px;margin-right: 10px;"></component>
          <span>
            {{menu.menuName}}
          </span>
        </template>
        <menu-list :menuList="menu.children"></menu-list>
      </el-sub-menu>

      <el-menu-item v-else :index="menu.path">
        <component :is="menu.menuIcon" style="width: 16px;height: 16px;margin-right: 10px;"></component>
        <template #title>
          {{menu.menuName}}
        </template>
      </el-menu-item>
    </template>
</template>

<script>
export default {
  name: 'MenuList',
  props: {
    menuConfig: {
      type: Object,
      default: function () {
        return {}
      }
    },
    menuList: {
      type: Array,
      default: function () {
        return [{

        }]
      }
    }
  },
  data() {
    return {
      
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style scoped>

</style>